<template>
  <!--  处理询价单-->
  <div class="dispose-index module-index">
    <breadcrumb-title :title="title"/>
    <div class="dispose-body module-body">
      <!--    处理询价单-->
      <div class="dispose-body-title">
        <div class="body-item-title">
          <span>处理询价单</span>
        </div>
        <div class="body-item-body">
        <span>
          &nbsp;&nbsp;
          <span style="color: red">*</span>
          订单号：系统自动生成
        </span>
        </div>
      </div>


      <!--      客户信息-->
      <client-info v-if="showInfo" ref="client-info" :info="clientInfo"/>

      <transport-address ref="transport-address" :info="data.address"/>
      <!--    计划时间-->
      <planed-time ref="planed-time" :info="data.planedTime"/>
      <!--    获取信息-->
      <load-information ref="load-information" :if-show="ifShow" :info="data.loadInfo"/>
      <!--      备注-->
      <remarks ref="remarks" :info="data.remarks"/>

      <!--      运输询价-->
      <order-module-title class="margin-border" title="运输询价"/>
      <div class="margin-border">
        <span v-text="data.address.origin"></span>
        <span>--></span>
        <span v-text="data.address.destination"></span>
      </div>
      <div class="margin-border" v-if="showInfo">
        <span style="color: red">*</span><span>询价有效截止期：</span>
        <el-date-picker
            class="body-item item-border"
            v-model="info.validEndTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择计划装货时间">
        </el-date-picker>
      </div>
      <div class="margin-border" v-if="showInfo">
        <span style="color: red">*</span><span>计算价格单位：</span>
        <el-select v-model="info.unit" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
<!--      选择司机报价-->
      <el-button @click="dialogTableVisible = true"  v-if="!showAdd && !showInfo">选择司机报价</el-button>
      <el-dialog class="dialog-index" title="选择司机报价" :visible.sync="dialogTableVisible">
        <div class="body">
          <div class="body-item" @click="activeDiv(-1)" :class="active === -1?ifActive:''"><span>全部</span></div>
          <div class="body-item" @click="activeDiv(1)" :class="active === 1?ifActive:''"><span>自有司机</span></div>
          <div class="body-item" @click="activeDiv(0)" :class="active === 0?ifActive:''"><span>外协司机</span></div>
          <div style="clear: both"></div>
        </div>
        <div>
          <div style="float:left;">
            <span>车牌号：</span>
            <el-input type="text" v-model="pagination.plateLicense" style="width: 60%"/>
          </div>
          <div style="float:left;">
            <span>司机姓名：</span>
            <el-input type="text" v-model="pagination.name" style="width: 60%"/>
          </div>
          <div style="float:left;">
            <el-button @click="search(1)">查询</el-button>
            <el-button  @click="dialogTableVisible = false">确定</el-button>
          </div>
          <div style="clear:both;"></div>
        </div>
        <el-table :data="driverData"  @selection-change="handleSelectionChange" stripe>
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column property="name" label="司机姓名" width="150"></el-table-column>
          <el-table-column property="quality" label="车辆性质" width="100"></el-table-column>
          <el-table-column property="plateLicense" label="车牌号" width="120"></el-table-column>
          <el-table-column property="outlets" label="所属网点" width="110"></el-table-column>
          <el-table-column property="models" label="车型" width="100"></el-table-column>
          <el-table-column property="specification" label="车辆规格" width="100"></el-table-column>
          <el-table-column property="carLicense" label="行驶证" width="120"></el-table-column>
          <el-table-column property="fuel" label="百公里耗油" width="100"></el-table-column>
          <el-table-column property="status" label="车辆状态" width="100"></el-table-column>
          <el-table-column property="maxLoad" label="额定载量(T)" width="100"></el-table-column>
        </el-table>
      </el-dialog>

<!--      承运商报价-->
      <order-module-title v-if="showAdd && showInfo" class="margin-border" title="司机报价"/>
      <div v-if="showAdd && showInfo && carriersData.length > 0" class="driver-transport-body">
        <el-table :data="carriersData" stripe>
          <el-table-column property="name" label="选择" width="50">
            <template scope="scope">
              <el-radio v-model="carriersDataRadioId"
                        :label="scope.row.id"
                        @change.native="handleRadioChange(scope.row.id)"
              >&nbsp;
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="司机姓名" width="150"></el-table-column>
          <el-table-column property="quality" label="车辆性质" width="100"></el-table-column>
          <el-table-column property="plateLicense" label="车牌号" width="120"></el-table-column>
          <el-table-column property="unitFee" label="单价" width="110"></el-table-column>
          <el-table-column property="models" label="车型" width="100"></el-table-column>
          <el-table-column property="specification" label="车辆规格" width="100"></el-table-column>
          <el-table-column property="maxLoad" label="载量(T)" width="120"></el-table-column>
          <el-table-column property="origin" label="发站" width="100"></el-table-column>
          <el-table-column property="destination" label="到站" width="100"></el-table-column>
          <el-table-column property="mileage" label="总里程" width="100"></el-table-column>
          <el-table-column property="freight" label="运费合计(￥)" width="100"></el-table-column>
          <el-table-column property="otherFees" label="其他费用(￥)" width="100"></el-table-column>
          <el-table-column property="validEndTime" label="报价有效截止期" width="160"></el-table-column>
          <el-table-column property="totalFees" label="总费用(￥)" width="100"></el-table-column>
        </el-table>
      </div>

      <add-quote ref="addQuote" v-if="showAdd" :info="addInfo"/>


      <div class="submit">
        <el-button  v-if="showAdd && showInfo" @click="carriersQuote">提交</el-button>

        <el-button @click="submit"  v-if="!showAdd && showInfo">提交</el-button>
        <el-button @click="quote"  v-if="showAdd && !showInfo">报价</el-button>
        <el-button @click="$router.push({name: 'quotation'})"  v-if="showAdd">取消</el-button>
        <el-button @click="$router.push({name: 'toBe'})"  v-if="!showAdd">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import TransportAddress from "@/components/order/component/TransportAddress";
import BreadcrumbTitle from "@/components/title/BreadcrumbTitle";
import PlanedTime from "@/components/order/component/PlanedTime";
import LoadInformation from "@/components/order/component/LoadInformation";
import Remarks from "@/components/order/component/Remarks";
import ClientInfo from "@/components/client/component/ClientInfo";
import OrderModuleTitle from "@/components/order/component/OrderModuleTitle";
import AddQuote from "@/components/order/component/AddQuote";
import {driverPage} from "@/apis/driver";
import {orderGetByOrderNUmber} from "@/apis/order";
import {getClientByOrderNumber} from "@/apis/client";
import {quoteToDriver} from "@/apis/user";
import {quotationStatusUpdate} from "@/apis/order";
import {driverQuote} from "@/apis/driver";
import {toGetDriverQuote} from "@/apis/user";
import {ifNullToObject} from "@/utils/constant/listElementCompute";
import {carriersQuote} from "@/apis/user";

export default{
  name: "DisposeQuotation",
  components: {
    BreadcrumbTitle,
    TransportAddress,
    PlanedTime,
    LoadInformation,
    Remarks,
    ClientInfo,
    OrderModuleTitle,
    AddQuote,

  },
  data() {
    return {
      title: '',
      ifShow: false,
      showAdd: false,
      showInfo: true,
      active: -1,
      ifActive: 'active',
      dialogTableVisible: false,
      data: {
        id: '',
        address: {}, // 运输地址
        planedTime: {}, // 计划时间
        loadInfo: {
          loadInformation: [],  // 货物信息
          total: {},  // 获取信息总数
        },
        remarks: '',
      },
      clientInfo: {},
      info: {
        validEndTime: '',
        unit: '',
        orderNumber: '',
        data: {},
        drivers: [],
      },
      pagination: {
        plateLicense: '',
        name: '',
        status: -1,
        page: 1,
        pageSize: 10,
      },
      quotation: {
        id: '',
        orderNumber: '',
        quote: {},
      },
      total: 0,
      addInfo: {},
      checkList: [],
      driverData: [],
      carriersData: [],
      carriersDataRadioId: '1',
      orderNumber: '',
      options: [
        {
          label: '元/kg',
          value: '元/kg',
        },
        {
          label: '元/km',
          value: '元/km',
        },
        {
          label: '元/吨',
          value: '元/吨',
        },
        {
          label: '元/车',
          value: '元/车',
        },
        {
          label: '元/m3',
          value: '元/m3',
        }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.title = this.$route.meta.title
      this.orderNumber = this.$route.query.orderNumber;
      if(this.$route.query.showInfo !== undefined){this.showInfo = this.$route.query.showInfo}
      if(this.$route.query.showAdd !== undefined){this.showAdd = this.$route.query.showAdd}

      // 司机分页查询
      this.search(1)
      // 获取订单信息
      orderGetByOrderNUmber(this.orderNumber).then(resp => {
        if(resp?.data?.code === 1){
          this.data = resp?.data?.data
        }else{this.$message.error(resp?.data?.msg)}
      })
      // 获取客户信息
      getClientByOrderNumber(this.orderNumber).then(resp => {
        if(resp?.data?.code === 1){
          this.clientInfo = resp?.data?.data
        }else{this.$message.error(resp?.data?.msg)}
      })
      // 获取运输询价信息
      if(this.showAdd && this.showInfo){
          toGetDriverQuote(this.orderNumber).then(resp => {
            if(resp?.data?.code === 1){
              const data = resp?.data?.data
              this.data.address.origin = data.origin
              this.data.address.destination = data.destination
              this.info.unit = data.unit
              this.info.validEndTime = data.validEndTime
              this.carriersData = data.list

              console.log(resp)
            }else{this.$message.error(resp?.data?.msg)}
          })
      }

    },
    // 承运商报价
    carriersQuote(){
      let data = this.$refs['addQuote'].data;
      let code = this.carriersDataRadioId;
      if(!ifNullToObject(data) && code === "1"){this.$message.error("请填写或选择报价")}
      else{
        let obj = {quote: data, quoteId: code,orderNumber: this.orderNumber,userId:localStorage.getItem("id")}
        carriersQuote(obj).then(resp => {
          if(resp?.data?.code === 1){
            this.$message.success("报价成功")
            this.$router.push({name:'quotation'})
          }else{this.$message.error(resp?.data?.msg)}
        })
      }

    },
    // 报价
    quote(){
      this.quotation.id = localStorage.getItem("id")
      this.quotation.orderNumber = this.orderNumber
      this.quotation.quote = this.$refs['addQuote'].data
      driverQuote(this.quotation).then(resp => {
        if(resp?.data?.code === 1){
          this.$message.success("报价成功")
          this.$router.push({name: 'toBe'})
        }else{this.$message.error(resp?.data?.msg)}
      })

    },
    // 选择单选框
    handleRadioChange(id){
      this.carriersDataRadioId = id
    },
    // 提交
    submit() {
      this.info.orderNumber = this.orderNumber
      this.info.data = this.data

      quoteToDriver(this.info).then(resp => {
        if(resp?.data?.code === 1){
          quotationStatusUpdate(this.orderNumber,3).then(resp => {
            if(resp?.data?.code === 1){
              this.$message.success("提交成功")
              this.$router.push({name: 'quotation'})
            } else{this.$message.error(resp?.data?.msg)}})}else{this.$message.error(resp?.data?.msg)}
      })


    },
    // 分页查询
    search(code){
      this.pagination.status = code

      driverPage(this.pagination).then(resp => {
        if(resp?.data?.code === 1){
          this.driverData = resp?.data?.data?.records
        }else{this.$message.error(resp?.data?.msg)}
      })
    },
    // 全部操作
    handleSelectionChange(val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.info.drivers = checkArr
    },
    // 切换对话框选项
    activeDiv(i){
      this.active = i
      this.search(i)
    },
  }
}
</script>

<style scoped lang="scss">




.active{
  background-color: white;
  border-right: black;
}


.dialog-index{
  max-height: 700px;


  .body{
    width: 150px * 3;
    background-color: #B3C0D1;
    height: 30px;
    line-height: 30px;

    .body-item{
      float: left;
      width: 150px;
      text-align: center;
      border-right: 1px white solid;
    }
    .body-item:hover{
      background-color: #409EFF;
      color: white;
    }

  }
}


::v-deep .el-dialog {
  width: 70%;
}


.margin-border {
  margin: 10px 0;
}


.dispose-index {

  .dispose-body {

    .dispose-body-title {
      width: 100%;
      height: 100px;
      border-bottom: 1px black solid;

      .body-item-body {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
      }

      .body-item-title {
        padding-left: 4px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        background-color: #B3C0D1;
      }
    }

    .submit {
      margin: 20px 0;
    }
  }

}
</style>